<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    <title>Drag and drop</title>
    <link rel="stylesheet" href="../style/default.css"/>

</head>

<body>
<div class="title">
    <h1>Drag and drop</h1>
</div>
<div class="body">
    <p>
        In Todo<sub>.EXE</sub>, You can drag to-do items to change its position in the list.
        If you hold down Ctrl while dropping you perform a copy.
    </p>
    <p>
         there are two concepts need to be clear for drag and drop:</p>
    <p>
        One is dragging item, which is the todo item that mouse pressed on when
        dragging starts.
    </p>
    <p>
        And secondly, the dropping item, which is the todo item that mouse
        pointer is on when dropping.
    </p>
    <p>
        Base on the relative position between mouse pointer and the dropping
        item, there will be three different drop behavior.
        <div>
            <img src="image/drop_type.en.png" alt=""/>
        </div>
    </p>
    <p>
        For example, when dragging item is 'first todo', dropping item is 'todo2.3', there can be
        three types of drop behavior
    </p>
    <p>
        <div><em>Drop above</em></div>
        <div>
            <img src="image/drop_above.png" alt=""/>
        </div>
    </p>
    <p>
        <div><em>Drop as child</em></div>
        <div>
            <img src="image/drop_as_child.png" alt=""/>
        </div>
    </p>
    <p>
        <div><em>Drop below</em></div>
        <div>
            <img src="image/drop_below.png" alt=""/>
        </div>
    </p>
</div>
</body>
</html>
